<template>
  <div class="search-list-wrap">
    <SearchItem
      icon="apps-o"
      :title="Category.categoryText "
      sub-title="Category"
      @onClick="onCategoryClick(Category,'Category')"
      v-if="Category.categoryText"
    />
    <SearchItem
      icon="user-o"
      :title="Author.author "
      sub-title="Author"
      @onClick="onCategoryClick(Author,'Author')"
      v-if="Author.author"
    />
    <SearchItem
      icon="newspaper-o"
      :title="Publisher.publisher "
      sub-title="Publisher"
      @onClick="onCategoryClick(Publisher,'Publisher')"
      v-if="Publisher.publisher"
    />

    <SearchTable
      :data="Book"
      @onClick="onBookClick"
    />

  </div>
</template>

<script>
  import SearchItem from "./searchItem.vue";
  import SearchTable from "./SearchTable.vue";
  export default {
    name: "SearchList",
    components: {
      SearchItem,
      SearchTable
    },
    props: {
      data: {}
    },
    computed: {
      Category() {
        return this.data.data.category[0] || {};
      },
      Author() {
        return this.data.data.author[0] || {};
      },
      Publisher() {
        return this.data.data.publisher[0] || {};
      },
      Book() {
        return this.data.data.book;
      }
    },
    methods: {
      onCategoryClick(text, key) { //展示分类点击后的列表
        let paramsJson = {
          "Category": "category",
          "Author": "author",
          "Publisher": "publisher"
        };
        let textJson = {
          "Category": text.categoryText,
          "Author": text.author,
          "Publisher": text.publisher
        };
        let params = paramsJson[key];
        let value = textJson[key];
        this.$router.push({
          path: "/pages/list/main",
          query : {
            params,
            value
          }
        });
      },
      onBookClick() {  //列表图书点击
        console.log("book click");
      }
    }
  };
</script>

<style scoped>

</style>
